<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		 .box {
		      width: 200px;
		      height: 200px;
		      overflow: auto;
		    }
	</style>
	<body>
		<div class="box" id="container">
		    <p>防抖演示</p>
		    <p>防抖演示</p>
		    <p>防抖演示</p>
		    <p>防抖演示</p>
		    <p>防抖演示</p>
		    <p>防抖演示</p>
		    <p>防抖演示</p>
		    <p>防抖演示</p>
		    <p>防抖演示</p>
		  </div>
		  
		<script type="text/javascript">
			// 防抖
			// function debounce(fn, wait) {
			//   var timeout = null;// 使用闭包，缓存变量
			//   return function() {
			
			//         if(timeout !== null) {
			//           console.log('清除定时器啦')
			//           clearTimeout(timeout);  //清除这个定时器
			//         }
			//         timeout = setTimeout(fn, wait);
			//     }
			//   }
			//   // 处理函数
			//   function handle() {
			//       console.log(Math.random());
			//   }
			//   var container = document.getElementById('container')
			//   container.addEventListener('scroll', debounce(handle, 1000));
			
			
			// 节流
			var throttle = function(func, delay) {
			    var timer = null; // 使用闭包，缓存变量
			    var prev = Date.now(); // 最开始进入滚动的时间
			    return function() {
			      var context = this;   // this指向window
			      var args = arguments;
			      var now = Date.now();
			      var remain = delay - (now - prev); // 剩余时间
			      clearTimeout(timer);
			      // 如果剩余时间小于0，就立刻执行
			      if (remain <= 0) {
			        func.apply(context, args);
			        prev = Date.now();
			      } else {
			        timer = setTimeout(func, remain);
			      }
			    }
			  }
			  function handle() {
			      console.log(Math.random());
			  }
			  var container = document.getElementById('container')
			  container.addEventListener('scroll', throttle(handle, 1000));
			  
			  
			  
			  // 结合应用场景
			  // 　　防抖(debounce)
			  
			  // 　　　　search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
			  
			  // 　　　　window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
			  
			  // 　　节流(throttle)
			  
			  // 　　　　鼠标不断点击触发，mousedown(单位时间内只触发一次)
			  
			  // 　　　　监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
		</script>
	</body>
</html>
